<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Layout.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Layout.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) {
	&quot;use strict&quot;;
	//构造函数
//	/**
//	 * 布局组件，目前暂时限于实现布局，至于CSS还没调好
//	 * @class
//	 */
	var Layout = function (element, options) {
		//4
		this.$element = $(element);
		this.options = $.extend({}, $.fn.layout.defaults, options);
		//事件列表
		this.render(options);
	};
	
	//原型定义，定义构造函数和其他方法
	Layout.prototype = {
//		/**
//		 * @constructor
//		 */
		constructor:Layout,
		//渲染布局页面
		render:function(options){
			var $this = this.$element;
			var layout = options.layout;
			if(!layout){
				console.info(&quot;no layout!&quot;);
				return false;
			}
			
			var methods = {
				&quot;default&quot;:&quot;Default&quot;,
				&quot;west_expanded&quot;:&quot;WestExpanded&quot;,
				&quot;west_to_bottom&quot;:&quot;WestToBottom&quot;,
				&quot;west_to_top&quot;:&quot;WestToTop&quot;
			};
			
			this[&quot;_render&quot; + methods[layout]]($this);
		}
		
		//默认布局渲染
		,_renderDefault:function($this){
			
			var $north = $this.children(&quot;div[region=&#x27;north&#x27;]&quot;);
			var $west = $this.children(&quot;div[region=&#x27;west&#x27;]&quot;);
			var $center = $this.children(&quot;div[region=&#x27;center&#x27;]&quot;);
			var $east = $this.children(&quot;div[region=&#x27;east&#x27;]&quot;);
			var $south = $this.children(&quot;div[region=&#x27;south&#x27;]&quot;);
			var $row1 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row2 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row3 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			//渲染north
			if($north.length){
				$north.addClass(&quot;col-xs-12&quot;).height(&quot;50&quot;);
				$row1.append($north);
			}
			//渲染west
			if($west.length){
				$west.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight);
			}
			//渲染center
			if($center.length){
				$center.addClass(&quot;col-xs-8&quot;).height(this.options.centerHeight);
			}
			//渲染east
			if($east.length){
				$east.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight);
			}
			$row2.append($west).append($center).append($east);
			//渲染south
			if($south.length){
				$south.addClass(&quot;col-xs-12&quot;).height(&quot;50&quot;);
				$row3.append($south);
			}
			
			$this.append($row1).append($row2).append($row3);
			
			//加空div条件判断
			if(!$west.length){
				$center.removeClass(&quot;col-xs-8&quot;).addClass(&quot;col-xs-10&quot;);
			}
			if(!$north.length){
				$row2.children(&quot;div&quot;).height($center.height()+50);
			}
			if(!$east.length){
				//如果右边为空，直接中间填充
				if($center.hasClass(&quot;col-xs-8&quot;)){
					$center.removeClass(&quot;col-xs-8&quot;).addClass(&quot;col-xs-10&quot;);
				}else if($center.hasClass(&quot;col-xs-10&quot;)){
					$center.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
				}
				
			}
			if(!$south.length){
				$row2.children(&quot;div&quot;).height($center.height()+50);
			}
		}
		
		//左边全扩展布局渲染
		,_renderWestExpanded:function($this){
			var $row1 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row2 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row3 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $div = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;col-xs-10&quot;).height(this.options.maxHeight);
			var $north = $this.children(&quot;div[region=&#x27;north&#x27;]&quot;);
			var $west = $this.children(&quot;div[region=&#x27;west&#x27;]&quot;);
			var $center = $this.children(&quot;div[region=&#x27;center&#x27;]&quot;);
			var $east = $this.children(&quot;div[region=&#x27;east&#x27;]&quot;);
			var $south = $this.children(&quot;div[region=&#x27;south&#x27;]&quot;);
			//先清空，再逐个按照规定顺序插入
			//加入左边的
			$this.empty();
			if($west.length){
				$west.addClass(&quot;col-xs-2&quot;).height(this.options.maxHeight);
				$this.append($west);
			}
			//加入右边的
			if($north.length){
				$north.height(&quot;50&quot;);
				$row1.append($north);
				$div.append($row1);
			}
			if($center.length){
				$center.addClass(&quot;col-xs-10&quot;).height(this.options.centerHeight);
				$row2.append($center);
			}
			if($east.length){
				$east.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight);
				$row2.append($east);
			}
			
			$div.append($row2);
			if($south.length){
				$south.height(&quot;50&quot;);
				$row3.append($south);
				$div.append($row3);
			}
			//加入到上一级div
			$this.append($div);
			//加空div条件判断
			if(!$west.length){
				$div.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
			}
			if(!$north.length){
				$row2.children(&quot;div&quot;).height($center.height()+50);
			}
			if(!$east.length){
				$center.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
			}
			if(!$south.length){
				$row2.children(&quot;div&quot;).height($center.height()+50);
			}
		}
		
		//左边菜单延伸到底部
		,_renderWestToBottom:function($this){
			var $north = $this.children(&quot;div[region=&#x27;north&#x27;]&quot;);
			var $west = $this.children(&quot;div[region=&#x27;west&#x27;]&quot;);
			var $center = $this.children(&quot;div[region=&#x27;center&#x27;]&quot;);
			var $east = $this.children(&quot;div[region=&#x27;east&#x27;]&quot;);
			var $south = $this.children(&quot;div[region=&#x27;south&#x27;]&quot;);
			
			var $row1 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row2 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row3 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row4 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $div = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;col-xs-10&quot;).height(this.options.centerHeight + 50);
			
			$this.empty();
			//渲染north
			if($north.length){
				$north.addClass(&quot;col-xs-12&quot;).height(&quot;50&quot;);
				$row1.append($north);
			}
			//1、row1包含west + div
			//2、div包含row2 + south
			//3、row2包含center + east
			//渲染west
			if($west.length){
				$west.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight + 50);
				$row2.append($west);
			}
			//渲染center
			if($center.length){
				$center.addClass(&quot;col-xs-10&quot;).height(this.options.centerHeight);
				$row3.append($center);
			}
			//渲染east
			if($east.length){
				$east.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight);
				$row3.append($east);
			}
			
			//渲染south
			if($south.length){
				$south.height(&quot;50&quot;);
				$row4.append($south);
			}
			
			//逐层由内到外追加
			$div.append($row3).append($row4);
			$row2.append($west).append($div);
			$this.append($row1).append($row2);
			
			//加空div条件判断
			if(!$west.length){
				$div.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
			}
			if(!$north.length){
				
			}
			if(!$east.length){
				//如果右边为空，直接中间填充
				$center.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
			}
			if(!$south.length){
				$row3.children(&quot;div&quot;).height($center.height()+50);
			}
		}
		
		//渲染左边延伸到顶部的布局
		,_renderWestToTop:function($this){
			var $north = $this.children(&quot;div[region=&#x27;north&#x27;]&quot;);
			var $west = $this.children(&quot;div[region=&#x27;west&#x27;]&quot;);
			var $center = $this.children(&quot;div[region=&#x27;center&#x27;]&quot;);
			var $east = $this.children(&quot;div[region=&#x27;east&#x27;]&quot;);
			var $south = $this.children(&quot;div[region=&#x27;south&#x27;]&quot;);
			var $row1=$(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row2=$(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row3=$(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $row4=$(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;row&quot;);
			var $div = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;col-xs-10&quot;);
			//先清空，再逐个按照规定顺序插入
			//加入左边的
			$this.empty();
			if($west.length){
				$west.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight);
				$row1.append($west);
			}
			//加入右边的
			if($north.length){
				$north.height(&quot;50&quot;);
				$row2.append($north);
				$div.append($row2);
			}
			if($center.length){
				$center.addClass(&quot;col-xs-10&quot;).height(this.options.centerHeight-50);
				$row3.append($center);
			}
			if($east.length){
				$east.addClass(&quot;col-xs-2&quot;).height(this.options.centerHeight-50);
				$row3.append($east);
			}
			$div.append($row3);
			$row1.append($div);
			
			$this.append($row1);
			//底部
			if($south.length){
				$south.addClass(&quot;col-xs-12&quot;).height(&quot;50&quot;);
				$row4.append($south);
				$this.append($row4);
			}
			
			//加空div条件判断
			if(!$west.length){
				$div.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
			}
			if(!$north.length){
				$row3.children(&quot;div&quot;).height($center.height()+50);
			}
			if(!$east.length){
				//如果右边为空，直接中间填充
				$center.removeClass(&quot;col-xs-10&quot;).addClass(&quot;col-xs-12&quot;);
			}
			if(!$south.length){
				
			}
			
		}
	};
	
	//加入到jQuery插件
	$.fn.layout = function(option,value){
		//3
		var methodReturn;

		var $set = this.each(function () {
			var $this = $(this);
			var data = $this.data(&#x27;koala.layout&#x27;);
			var options = typeof option === &#x27;object&#x27; &amp;&amp; option;

			if (!data) $this.data(&#x27;koala.layout&#x27;, (data = new Layout(this, options)));
			if (typeof option === &#x27;string&#x27;) methodReturn = data[option](value);
		});

		return (methodReturn === undefined) ? $set : methodReturn;
	};
	
	//默认属性列表
	$.fn.layout.defaults = {
//		/**
//		 * 顶部最小高度，单位px
//		 * @property minHeigh
//		 * @type {Integer}
//		 * @default 50
//		 */
		minHeigh:50,
//		/**
//		 * 布局方式
//		 * @property layout
//		 * @type {String}(default,west_expanded,west_to_bottom,west_to_top)
//		 * @default &quot;default&quot;
//		 */
		layout:&quot;default&quot;,
//		/**
//		 * 中间区域的高度，单位px
//		 * @property centerHeight
//		 * @type {Integer}
//		 * @default 500
//		 */
		centerHeight:500,
//		/**
//		 * 总体布局的高度，单位px
//		 * @property maxHeight
//		 * @type {Integer}
//		 * @default 600
//		 */
		maxHeight:600,
		collapsible:true					//是否加上折合功能，此功能留到V2
	};
	
	//插件的构造对象赋值
	$.fn.layout.Constructor = Layout;
}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
